@mixin p-logo-link {
  .p-logo-link {
    border: 1px solid transparent;
    border-radius: 2px;
    display: block;
    margin-top: 0;

    // override for Vanilla 2.0 adding border
    // possibly we should revisit this styling at some point
    .p-card__header {
      border: 0;
      padding: 0;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    &:hover,
    &.is-selected {
      border-color: $color-mid-light;
      text-decoration: none;
    }

    &:visited {
      color: inherit;
    }

    // first snap flow details link styles
    &.is-open {
      border-bottom: 1px solid $color-mid-light;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      overflow: visible;
      position: relative;
    }

    // bordered arrow
    &.is-open::after,
    &.is-open::before {
      border-style: solid;
      content: '';
      display: block;
      height: 0;
      left: 100%;
      position: absolute;
      width: 0;
    }

    &.is-open::after {
      border-color: transparent transparent $color-x-light transparent;
      border-width: .75rem;
      bottom: -1px;
      left: 50%;
      margin-left: -.75rem;
    }

    &.is-open::before {
      border-color: transparent transparent $color-mid-light transparent;
      border-width: .75rem;
      bottom: 0;
      left: 50%;
      margin-left: -.75rem;
    }

    // disable focus outline on open link to make border more visible
    &.is-open:focus {
      outline: none;
    }

    &.is-disabled {
      opacity: .6;

      &::after {
        content: 'Coming soon';
        display: block;
        font-size: .875rem;
      }

      &:hover {
        border-color: transparent;
      }

      img {
        filter: grayscale(1);
      }
    }
  }

  .p-logo-image {
    align-items: center;
    display: flex;
  }
}
